<template>
  <div class="homebg">
    <div class="index-bg">
      <div class="hearbox" v-if="!showh">
        <div class="nologin"></div>
      </div>
      <div class="hearbox" v-if="showh">
        <router-link tag="div" class="head-portrait" to="/userinfo">
        </router-link>
      </div>




      <div class="sign-big" v-if="!signin" @click="signins()">
        <div class="sign">

          <svg t="1665455727068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="6460" width="28" height="28">
            <path
              d="M352.576 128v64H832a64 64 0 0 1 64 64v576a64 64 0 0 1-64 64H192a64 64 0 0 1-64-64V256a64 64 0 0 1 64-64h96.576V128h64zM832 384.704H192V832h640V384.704zM544 640v64h-64v-64h64z m192 0v64h-64v-64h64z m-384 0v64h-64v-64h64z m192-128v64h-64V512h64z m192 0v64h-64V512h64z m-384 0v64h-64V512h64zM832 256H192v64h640V256z m-95.552-128v64h-64V128h64z"
              p-id="6461"></path>
          </svg>
          <span>签到</span>
          <span>10/11 Tues.</span>
        </div>
      </div>
      <transition mode="out-in" name="answer">
        <div class="worlds" v-if="signin">
          <h1>{{ cet4list[0].name }}</h1>
        </div>
      </transition>




      <div class="learn-r">
        <router-link to="/newstady">
          <div>
            <span>Learn</span>
            <p>{{ unstadynum }}</p>
          </div>
        </router-link>

        <router-link to="/practice">
          <div>
            <span>Review</span>
            <p>{{ stadynumber }}</p>
          </div>
        </router-link>

      </div>

      <div class="index-foot">

        <router-link to="/classlist">
          <svg t="1665470368674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2080" width="22" height="22">
            <path
              d="M 511.991 158.56 l 326.944 204.163 l -326.944 204.163 l -326.926 -204.163 L 511.991 158.56 M 512 81.564 c -11.307 0 -22.613 2.691 -31.247 8.075 L 74.716 343.222 c -17.249 10.767 -17.249 28.235 0 39.02 l 406.037 253.565 c 8.634 5.401 19.94 8.093 31.247 8.093 c 11.297 0 22.605 -2.691 31.229 -8.093 l 406.055 -253.565 c 17.25 -10.785 17.25 -28.253 0 -39.02 L 543.229 89.639 c -8.624 -5.383 -19.932 -8.075 -31.229 -8.075 Z"
              p-id="2081" fill="#ffffff"></path>
            <path
              d="M 512 942.436 c -158.396 0 -318.75 -49.109 -318.75 -142.97 V 452.298 h 75 v 347.167 c 0 19.721 85.419 67.969 243.75 67.969 c 158.332 0 243.75 -48.248 243.75 -67.969 V 452.298 h 75 v 347.167 c 0 93.861 -160.354 142.971 -318.75 142.971 Z"
              p-id="2082" fill="#ffffff"></path>
            <path
              d="M 899.104 321.616 c 20.709 0 37.5 16.791 37.5 37.5 v 225 c 0 20.709 -16.791 37.499 -37.5 37.499 s -37.5 -16.79 -37.5 -37.499 v -225 c 0 -20.71 16.791 -37.5 37.5 -37.5 Z"
              p-id="2083" fill="#ffffff"></path>
          </svg>
        </router-link>


        <router-link tag="div" to="/mycontent">
          <svg t="1665470345617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1904" width="22" height="22">
            <path
              d="M0 0v1024h1024V0H0z m959.603189 959.603189H64.396811V703.829938h287.518158c0 89.792737 70.745793 159.631532 159.631532 159.631532 89.792737 0 160.53853-69.838795 160.53853-159.631532h287.518158v255.773251z m0-319.263065H607.68822v63.489814c0 51.698849-41.721878 96.141718-96.141719 96.141718s-95.234721-44.44287-95.234721-96.141718v-63.489814H64.396811V64.396811h895.206378v575.943313z"
              fill="#ffffff" p-id="1905"></path>
            <path
              d="M192.283437 224.028344h639.913835v63.988662H192.283437zM192.283437 416.31178h639.913835v63.988663H192.283437z"
              fill="#ffffff" p-id="1906"></path>
          </svg>
        </router-link>

        <router-link to="/dashboard">
          <svg t="1665469766208" class="icon" viewBox="0 0 1397 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1729" width="22" height="22">
            <path
              d="M1305.693091 1024 90.670545 1024C40.401455 1024 0 983.877818 0 933.981091L0 90.018909C0 40.122182 40.401455 0 90.670545 0L1305.693091 0C1355.962182 0 1396.363636 41.239273 1396.363636 91.136L1396.363636 933.981091C1396.363636 983.877818 1355.962182 1024 1305.693091 1024ZM1305.693091 120.366545C1305.693091 103.051636 1291.450182 90.018909 1275.066182 90.018909L121.297455 90.018909C103.796364 90.018909 90.670545 104.168727 90.670545 120.366545L90.670545 904.657455C90.670545 922.065455 104.913455 935.005091 121.297455 935.005091L1275.066182 935.005091C1292.567273 935.005091 1305.693091 920.948364 1305.693091 904.657455L1305.693091 120.366545ZM797.602909 852.619636 600.901818 342.760727 514.606545 569.530182 342.016 569.530182 342.016 484.910545 484.072727 484.910545 600.901818 173.521455 797.602909 683.380364 880.64 484.910545 1053.323636 484.910545 1053.323636 569.530182 939.659636 569.530182 797.602909 852.619636Z"
              p-id="1730" fill="#ffffff"></path>
          </svg>
        </router-link>


      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['cet4list'],
  data() {
    return {
      signin: false,//签到,
      showh: false
    };
  },
  methods: {
    signins() {
      window.localStorage.setItem("sign", "pass");
      this.signin = true
    }
  },
  computed: {
    stadynumber() {//已学计数
      var newArrays = this.cet4list.filter(function (item) {
        return !item.ripe && item.stadydone == true;
      });
      return newArrays.length;
    },
    unstadynum() {//待学计数
      var newArrays = this.cet4list.filter(function (item) {
        return !item.stadydone == true;
      });
      return newArrays.length;
    },

  },
  created() {
    let logining = window.localStorage.getItem("password")
    if (logining) {
      this.showh = true
    }
    let sign = window.localStorage.getItem("sign")
    if (sign) {
      this.signin = true
    }
  }
}
</script>

<style lang="scss" scoped>
// .container {
//   margin: 0 auto;
//   background-color: #333;
.answer-enter {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}

.answer-leave-to {
  opacity: 0;
  transform: translate3d(0, 0, 100%);
}


.answer-enter-active,
.answer-leave-active {
  will-change: transform;
  transition: all 300ms;
  // position: absolute;
}

.homebg {

  min-height: 667px;
  // background-image: url(../assets/img/20200921053915763.jpg);
  // background-size: cover;

  .index-bg {
    // min-height: 667px;
    // height: 100%;

    // position: relative;

    .worlds {
      display: flex;
      justify-content: center;
      padding-top: 169.2px;


      h1 {
        font-size: 42px;
        color: white;
        font-weight: 600;
      }
    }

    .hearbox {
      padding-top: 27px;

      .head-portrait {
        // <img src="../assets/img/vip.png" alt="" style="width: 18px;height: 18px;">
        background-image: url(../assets/img/hear.png);
        background-size: cover;
        background-position: center;
        width: 42px;
        height: 42px;
        margin-left: 15px;

        border: 2px solid rgba(218, 224, 223, 0.8);
        border-radius: 50%;
        // position: absolute;
        // top: 28px;
        // left: 16px;
      }

      .nologin {
        background-color: #bdc0c8;
        width: 42px;
        height: 42px;
        margin-left: 15px;

        border: 2px solid rgba(218, 224, 223, 0.8);
        border-radius: 50%;
      }
    }


    .sign-big {
      display: flex;
      justify-content: center;
      padding-top: 79px;

      .sign {
        width: 139px;
        height: 139px;
        background-color: rgba(218, 224, 223, 0.8);
        border-radius: 20%;
        /* right: 118px; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        svg {
          margin-bottom: 8px;
        }

        span {
          margin-bottom: 5px;
          font-size: 16px;
        }
      }
    }

    .learn-r {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      // position: absolute;
      // bottom: 107px;
      padding-top: 228px;

      div {
        width: 150px;
        height: 60px;
        background-color: rgba(218, 224, 223, 0.6);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        span {
          font-size: 14px;
          margin-left: 10px;
          font-weight: 700;
        }

        p {
          font-size: 11px;
          color: rgb(251, 109, 12);
          display: inline-block;
          margin-left: 10px;
        }

      }



    }

    .index-foot {
      width: 100%;
      // position: absolute;
      // bottom: 30px;
      display: flex;
      justify-content: space-around;
      padding-top: 30px;
      padding-bottom: 20px;
    }

  }
}

// }
</style>